<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的订单</title>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet"/>
    <link rel="stylesheet"/>

    <link rel="stylesheet" th:href="@{/mall/css/main.css}" />


</head>
<body class="animsition">
<div th:replace="@{/include/fore_header}::header"></div>
<div class="widget widget-control-header widget-search-header">
    <div class="widget widget-control-header hidden-lg hidden-md hidden-sm">
        <a class="navbar-toggle js-offcanvas-has-events" type="button" href="#menu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
    </div>
    </aside>
</div>
</div>
</div>
</header>
<section class="sub-header shop-detail-1" STYLE="margin-bottom: 30px">
    <img class="rellax bg-overlay" th:src="@{/mall/images/sub-header/015.jpg}" alt="">
    <div class="overlay-call-to-action"></div>
    <h3 class="heading-style-3">我的订单</h3>
</section>
    <section class="box-sm">
        <div class="container">
            <div class="woocommerce">
                <div class="row main">
                    <div class="box-body">
                        <table id="example" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>订单总价</th>
                                <th>订单状态</th>
                                <th>订单生成时间</th>
                                <th>订单操作</th>
                            </tr>
                            </thead>
                            <tbody id="OrderTBody">
                            <!--<tr id="order" th:each="order :${orders}">-->
                                <!--<td th:text="${order.orderId}"></td>-->
                                <!--&lt;!&ndash;<td th:text="${order.customerId}"></td>&ndash;&gt;-->
                                <!--&lt;!&ndash;<td th:text="${order.amount}"></td>&ndash;&gt;-->
                                <!--<td th:text="${order.total}"></td>-->
                                <!--<td class="status" th:text="${order.orderStatus}" id="order_status"></td>-->
                                <!--<td th:text="${#dates.format(order.orderTime,'yyyy-MM-dd HH:mm:ss')}"></td>-->
                                <!--<td class="col-operate">-->
                                    <!--<button type="button" class="btn btn-modify btn-warning btn-sm"-->
                                            <!--data-toggle="modal"-->
                                            <!--data-target="#modal-default" th:attr="onclick=|foremodify(this,'${order.orderId}')|">详情-->
                                    <!--</button>-->
                                    <!--<button type="button" class="btn btn-delete btn-danger btn-sm">取消</button>-->
                                <!--</td>-->
                            <!--</tr>-->
                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
                <!--modal-->
                <div class="modal fade" id="modal-default">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" >订单详情</h4>
                            </div>
                            <form role="form" th:action="@{/order/foremodify}" method="post">
                                <div class="modal-body">
                                    <table style="width: 100%">
                                        <tbody>
                                        <tr>
                                            <td width="20%">订单编号:</td>
                                            <td width="80%"><input type="text" class="form-control"
                                                                   readonly="readonly"
                                                                   name="orderId" id="orderId">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="20%">订单总价:</td>
                                            <td width="80%"><input type="text" class="form-control"
                                                                   readonly="readonly" name="total"
                                                                   id="total">
                                            </td>
                                        </tr>

                                        <tr>
                                            <td width="20%">订单状态:</td>
                                            <td width="80%"><input type="text" class="from-control"
                                                                   readonly="readonly" name="orderStatus"
                                                                   id="orderStatus">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="20%">订单生成时间:</td>
                                            <td width="80%"><input type="text" class="form-control"
                                                                   readonly="readonly" name="orderTime"
                                                                   id="ordersTime">
                                            </td>
                                        </tr>
                                        <tr>
                                            <table id="order_" ></table>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
                                        关闭
                                    </button>
                                    <!--<button type="submit" class="btn btn-primary">完成</button>-->
                                </div>
                            </form>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<div th:replace="@{/include/fore_footer}::footer"></div>

<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.js}"></script>
<script th:src="@{/mall/js/library/jquery.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap.min.js}"></script>
<script th:src="@{/mall/js/function-check-viewport.js}"></script>
<script th:src="@{/mall/js/library/slick.min.js}"></script>
<script th:src="@{/mall/js/library/select2.full.min.js}"></script>
<script th:src="@{/mall/js/library/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/mall/js/library/jquery.mmenu.all.min.js}"></script>
<script th:src="@{/mall/js/library/rellax.min.js}"></script>
<script th:src="@{/mall/js/library/isotope.pkgd.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap-notify.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap-slider.js}"></script>
<script th:src="@{/mall/js/library/in-view.min.js}"></script>
<script th:src="@{/mall/js/library/countUp.js}"></script>
<script th:src="@{/mall/js/library/animsition.min.js}"></script>
<script th:src="@{/mall/js/global.js}"></script>
<script th:src="@{/mall/js/config-mm-menu.js}"></script>
<script th:src="@{/mall/js/config-carousel-product-quickview.js}"></script>
<script th:src="@{/mall/js/demo-add-to-cart.js}"></script>
<script th:src="@{/adminlte/bower_components/layer-v3.1.1/layer/layer.js}"></script>
<script>
    function foremodify(obj,id) {
        var tds = $(obj).parent().parent().find('td');
        var typeSelect = $("#orderId").find("option");
        var type;
        for (var i = 0; i < typeSelect.length; i++) {
            type = typeSelect.eq(i).text();//option中的值
            if (tds.eq(0).text() == type) {
                type = typeSelect.eq(i).val();
                break;
            }
        }
        $("#orderId").val(tds.eq(0).text());
        // $("#custumerId").val(tds.eq(1).text());
        // $("#amont").val(tds.eq(2).text());
        $("#total").val(tds.eq(1).text());
        $("#orderStatus").val(tds.eq(2).text());
        $("#ordersTime").val(tds.eq(3).text());

        $.ajax({
            url:"/order/od?"+id,
            method:"post",
            success:function (data) {
                for (var i=0;i<data.length;i++){
                    $("#order_").html("<thead>\n" +
                        "<tr>\n" +"<th class=\"product-name\">商品名称</th>\n" +
                        "<th>数量</th>\n" +"<th class=\"product-total\">商品总价</th>\n" +
                        "\n" +"</tr>\n" +"</thead>\n" +"<tbody>\n" +
                        "<tr class=\"cart_item\">\n" +
                        "<td class=\"product-name\">\n" + data[i].goods.goodsName +"\n" + "</td>\n" +"<td>\n" +
                        "<span>"+ data[i].goodsAmount +"</span>\n" +
                        "</td>\n" +"<td class=\"product-total\">\n" +
                        "<span class=\"woocommerce-Price-amount amount\">$\n" +
                        "<span class=\"woocommerce-Price-currencySymbol\" >"+data[i].total+"</span></span>\n" +
                        "</td>\n" +"</tr>\n" +"</tbody>");
                }
            }
        })
    }

    $(".sidebar-menu li").click(function (e) {
        $(".sidebar-menu li").removeClass("active");
        $(this).addClass("active");
    });

    $(document).ready(function () {
        $.ajax({
            url:"/order/listorder",
            method:"get",
            success:function (result) {
                // var date = new Date();
                // alert(result);
                for (var i = 0; i < result.length; i++) {
                    if(result[i].orderStatus!=='已完成'){
                        $("#OrderTBody").append('<tr>\n' +
                            '<td>'+result[i].orderId+'</td>\n' +
                            '<td>'+result[i].total+'</td>\n' +
                            '<td class="status">'+result[i].orderStatus+'</td>\n' +
                            // '<td>'+dates.format(result[i].ordersTime,"yyyy-MM-dd HH:mm:ss")+'</td>\n' +
                            '<td >'+ new Date(result[i].orderTime).toLocaleDateString() + " " + new Date(result[i].orderTime).toLocaleTimeString() +'</td>\n' +
                            '<td class="col-operate">\n' +
                            '<button type="button" class="btn btn-modify btn-warning btn-sm"\n' +
                            'data-toggle="modal"\n' +
                            'data-target="#modal-default" onclick="foremodify(this,'+'\''+result[i].orderId+'\''+')">详情\n' +
                            '</button>\n' +
                            '<button type="button" class="btn btn-delete btn-danger btn-sm" onclick="Cancel(this,'+'\''+result[i].orderId+'\''+')">取消</button>\n' +
                            '</td>\n' +
                            '</tr>')
                    }else{
                        $("#OrderTBody").append('<tr>\n' +
                            '<td>'+result[i].orderId+'</td>\n' +
                            '<td>'+result[i].total+'</td>\n' +
                            '<td class="status">'+result[i].orderStatus+'</td>\n' +
                            //'<td>'+dates.format(result[i].orderTime,"yyyy-MM-dd HH:mm:ss")+'</td>\n' +
                            '<td>'+ new Date(result[i].orderTime).toLocaleDateString() + " " + new Date(result[i].orderTime).toLocaleTimeString() +'</td>\n' +
                            '<td class="col-operate">\n' +
                            '<button type="button" class="btn btn-modify btn-warning btn-sm"\n' +
                            'data-toggle="modal"\n' +
                            'data-target="#modal-default" onclick="foremodify(this,'+'\''+result[i].orderId+'\''+')">详情\n' +
                            '</button>\n' +
                            '</td>\n' +
                            '</tr>')
                    }
                }
            }
        })
    })

    function Cancel(elem,id) {
                layer.confirm("确定取消吗？", {icon: 3, title: '提示'}, function (index) {
                    $.ajax({
                        type: "POST",
                        url: "/order/delete",
                        data: {id: id},
                        dataType: "json",
                        success: function (msg) {
                            if (msg["ok"]) {
                                layer.msg("操作成功", {time: 700}, function () {
                                    //  window.location.reload();
                                    $(elem).parent().parent().remove();
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
    }
</script>
</body>
</html>

